<template>
  <BasicModal
      v-bind="$attrs"
      @register="registerModal"
      :title="'测试'"
      @ok="handleSubmit"
      @cancel="handelCancel"
  >
    <div class="h-screen">
      <Description
          :column="3"
          :data="rowData"
          :schema="descriptionSchema"
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { BasicModal, useModalInner } from '../Modal';
import {toRaw,ref} from "vue";
import {DescItem, Description} from '@/components/Description';
import { useAppInject } from "@/hooks/web/useAppInject";
const { getIsMobile } = useAppInject();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  modalTitle.value = toRaw(data.modalTitle);
  modalMinHeight.value = toRaw(data.modalMinHeight);
  modalHeight.value = toRaw(data.modalHeight);
  modalWidth.value = toRaw(data.modalWidth);
  rowData.value = toRaw(data.rowData);
  descriptionSchema.value = toRaw(data.descriptionSchemaParam);
  setModalProps({
    confirmLoading: false,
    title: modalTitle,
    defaultFullscreen: getIsMobile.value,
    width: modalWidth,
    minHeight: modalHeight,
    height: modalMinHeight,
    showOkBtn: false,
    cancelText: '关闭',
  });
});
const rowData = ref({
  name: '测试',
  age: 12,
  address: 'test',
});
const descriptionSchema = ref([
  {
    label: '姓名',
    field: 'name',
  },
  {
    label: '年龄',
    field: 'age',
  },
  {
    label: '地址',
    field: 'address',
  }] as DescItem[]);

const modalTitle = ref("Iframe Modal");
const modalMinHeight = ref("500px");
const modalHeight = ref("500px")
const modalWidth = ref("800px");
function handelCancel() {

}
async function handleSubmit() {
  setModalProps({ confirmLoading: false });
  closeModal();
}
</script>
